<template>
  <div class="app-container bg-gray">
    <transition name="fade-transform" mode="out-in">
      <router-view />
    </transition>
    <el-card v-if="isShow" class="box-1">
      <div slot="header"><span>企业展示</span>
        <el-button v-if="queryMatch(212)" type="success" size="small" class="bg-green" @click="toModify">编辑</el-button>
      </div>
      <el-form label-width="160px">
        <el-form-item label="企业名称：" prop="title">{{ info['name'] }}</el-form-item>
        <el-form-item label="略缩图：">
          <ws-img :src="info['picture']?ImageUrl+info['picture']:''" style="height: 160px;"/>
        </el-form-item>
        <el-form-item label="企业简介："><pre class="pre">{{ info['introduce'] }}</pre></el-form-item>
        <el-form-item label="服务电话：">{{ info['tel'] }}</el-form-item>
        <el-form-item label="联系地址："><pre class="pre">{{ info['address'] }}</pre></el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      ImageUrl: '',
      info: {}
    }
  },
  watch: {
    $route(to) {
      if (to.name === '企业展示') {
        this.getData();
        setTimeout(() => {
          this.isShow = true;
        }, 500);
      } else {
        this.isShow = false;
      }
    }
  },
  created() {
    if (this.$route.name === '企业展示') {
      this.isShow = true;
      this.getData();
    }
  },
  methods: {
    getData() {
      const url = 'workorder/enterprise'
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.info = res.data;
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员');
      })
    },
    toModify() {
      this.$router.push({
        path: '/information/display/modify'
      })
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
@import '../../../styles/index.scss';
.box-1 {
  max-width: 1000px;
  margin: 0 auto;
  > div span {
    font-size: 18px;
    font-weight: 600;
    padding: 0 10px;
  }
}

.pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 20px;
  padding: 0;
  margin: 10px 0;
}
</style>
